<template>
  <view class="eventDetails-page">
    <head-box></head-box>
    <view class="eventDetails-page-swiper">
      <view class="uni-padding-wrap">
        <view class="page-section swiper">
          <view class="page-section-spacing">
            <swiper
              class="swiper"
              indicator-dots
              indicator-active-color="#FFFFFF"
              circular
              autoplay
            >
              <swiper-item>
                <view class="swiper-item"
                  ><image class="_item-img" :src="details && details.movePic" mode=""></image>
                </view>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </view>

    <view class="eventDetails-page-main">
      <view class="_main-header">
        <view>{{ details && details.moveTitle }}</view>
        <view class="dv">
          <text class="stitle">活动主办方：{{ details && details.moveOrg }}</text>
          <view class="db">
            <view class="pageviews">
              <image src="../../static/img/borwer.png"></image>
              <text class="t1">浏览量</text> <text>{{ pageviews || 0 }}</text>
            </view>
            <view class="share">
              <view class="_img" @tap="onShare">
                <image class="icon" src="/static/other/982daed473d873c994815346398149c.png"></image>
                去分享
              </view>
              <button style="display: none" size="mini" class="_img" @tap="onShare"
                ><image class="icon" src="/static/other/982daed473d873c994815346398149c.png"></image
                >去分享</button
              >
              <text style="display: none">{{ newsOperateTimes.shareTimes }}</text>
            </view>
          </view>
        </view>
        <text class="stitle"
          >活动对象&nbsp;&nbsp;&nbsp;：{{ details && details.activityObjx }}</text
        >
      </view>
      <view class="_main-time">
        <view class="_main-box-info">
          <view class="_main-box-info-label">预约截止时间</view>
          <view class="_main-box-info-val">{{ details.dateendTime }}</view>
        </view>
        <view class="_main-box-info">
          <text v-if="details.activityCategory === 1" class="_status" :class="moveStatus&&moveStatus.cls">{{
              moveStatus&&moveStatus.name
          }}</text>

          <text v-else class="_status" :class="'status' + isMoveStatus.status">{{
            moveStatus
          }}</text>
        </view>
        <view class="_main-box-info">
          <view class="_main-box-info-label">活动开始时间</view>
          <view class="_main-box-info-val">{{ details && details.startTime }}</view>
        </view>
        <view class="_main-box-info">
          <view class="_main-box-info-label">活动结束时间</view>
          <view class="_main-box-info-val">{{ details && details.endTime }}</view>
        </view>
      </view>

      <view class="_main-box-info">
        <view class="_main-box-info-label">活动地址</view>
        <view class="_main-box-info-val addrWrap">{{ details && details.moveAddr }}</view>
        <view class="_position" @click="onPosConfigs">
          <image class="icon" src="../../static/img/positionNew.png" mode=""></image>
          <view class="distance">距我{{ distances }}</view>
        </view>
      </view>
      <view class="_main-box-info w50">
        <view class="_main-box-info-label">联系方式</view>
        <view class="_main-box-info-val">
          <text class="_val">{{ details && details.linkMobile }}</text>
        </view>
      </view>

      <view class="_main-box-info w50" style="position: relative">
        <view class="_main-box-info-label">联系人</view>
        <view class="_main-box-info-val"
          ><text class="_val">{{ details && details.linkName }}</text>
        </view>
      </view>
      <view class="_main-box-info w50">
        <view class="_main-box-info-label">可参与人数</view>
        <view class="_main-box-info-val" v-if="details && details.moveNum">
          <text class="_val">{{ details && details.moveNum }}</text
          >人
        </view>
        <view class="_main-box-info-val" v-else>
          <text class="_val">不限人数</text>
        </view>
        <view class="_main-box-info-pic" style="display: none">
          <image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
          <image class="_img" src="../../static/img/hmztc.png" mode=""></image>
          <image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
          <image class="_img" src="../../static/img/hmztc.png" mode=""></image>
        </view>
      </view>

      <view class="_main-box-info w50" style="position: relative">
        <view class="_main-box-info-label">已报名人数</view>
        <view class="_main-box-info-val"
          ><text class="_val">{{ details && details.personNumber }}</text
          >人
        </view>
        <view class="_main-box-info-pic" style="display: none">
          <image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
          <image class="_img" src="../../static/img/hmztc.png" mode=""></image>
          <image class="_img" src="../../static/img/hd4.jpg" mode=""></image>
          <image class="_img" src="../../static/img/hmztc.png" mode=""></image>
        </view>
      </view>
    </view>

    <view class="eventDetails-page-main tab-botton">
      <view class="_main-tab-box">
        <view
          class="_tab-btn"
          :class="tabType == 1 ? '_tab-btn-active' : ''"
          @tap="changeTabType(1)"
        >
          <text class="_btn-text">详情</text>
        </view>
        <view
          class="_tab-btn"
          :class="tabType == 2 ? '_tab-btn-active' : ''"
          @tap="changeTabType(2)"
        >
          <text class="_btn-text">须知</text>
        </view>
      </view>
      <view class="_main-content">
        <view class="_main-content-win">
          <view
            class="_main-content-box"
            :class="tabType == 1 ? '_main-content-box-l' : '_main-content-box-r'"
          >
            <!-- 详情  -->
            <view class="_main-content-box-item">
              <u-parse
                :html="details && details.moveDesc"
                v-if="details && details.moveDesc"
              ></u-parse>
              <u-empty text="暂无活动详情" mode="list" v-else></u-empty>
            </view>
            <!-- 须知 -->
            <view class="_main-content-box-item">
              <u-empty text="暂无活动须知" mode="list"></u-empty>
            </view>
          </view>
          <!-- <button
            class="_main-content-btn"
            :class="[
              dateStatusStr.status === 1
                ? 'status1'
                : dateStatusStr.status === 2
                ? 'status2'
                : dateStatusStr.status === 3
                ? 'status3'
                : dateStatusStr.status === 4
                ? 'status4'
                : 'status5',
            ]"
            @tap="onActiveDetal"
            >{{ dateStatusStr.name }}</button -->
          <button class="_main-content-btn" :class="moveStatus&&moveStatus.cls" @tap="onActiveDetal">{{
              moveStatus&&moveStatus.name
          }}</button>
        </view>
      </view>
    </view>

    <tabs-box></tabs-box>
    <!-- 分享 -->
    <pointshare :show="isShow" @close="onClose"></pointshare>
  </view>
</template>

<script>
  import pointshare from '@/components/point-share/index'
  import { share1 } from '@/mixins/share-1'
  import longpos1 from '@/mixins/longpos-1'

  export default {
    mixins: [share1, longpos1],
    components: {
      pointshare,
    },
    data() {
      return {}
    },
    onLoad(options) {},
    computed: {
      dateStatusStr() {
        const { dateStatus } = this.details
        let data = {}
        if (dateStatus === 1) {
          data = {
            cls: 'status1',
            name: '我要报名',
            status: dateStatus,
          }
        }
        if (dateStatus === 2) {
          data = {
            cls: 'status2',
            name: '预约进行中',
            status: dateStatus,
          }
        }
        if (dateStatus === 3) {
          data = {
            cls: 'status3',
            name: '预约已结束',
            status: dateStatus,
          }
        }
        if (dateStatus === 4) {
          data = {
            cls: 'status4',
            name: '预约未开始',
            status: dateStatus,
          }
        }
        if (dateStatus === 5) {
          data = {
            cls: 'status5',
            name: '预约已截止',
            status: dateStatus,
          }
        }
        return data
      },
    },

    methods: {
      //跳页面
      onActiveDetal() {
        const { status: dateStatus } = this.dateStatusStr
        if (!this.isBtnMoveJoinNum) {
          this.$api.msg('预约人数已满')
          return false
        }
        if (dateStatus === 1 || dateStatus === 2) {
          this.$api.handleMenu(
            `/pages/activityReservation/activityReservation?id=${this.id}&faceTarget=${
              this.details && this.details.faceTarget
            }&needCreditNo=${this.details && this.details.needCreditNo}&type=-99`
          )
          return false
        }
      },
    },
  }
</script>

<style lang="scss">
  .eventDetails-page {
    width: 100%;
    background-color: rgba(248, 248, 249, 1);

    .eventDetails-page-swiper {
      width: 100%;
      height: 500rpx;
      border-radius: 30rpx 30rpx 0 0;

      .uni-padding-wrap {
        height: 100%;
      }

      .page-section-spacing {
        height: 100%;
      }

      .swiper {
        height: 100%;
        padding: 10rpx;

        .swiper-item {
          width: 100%;
          height: 100%;

          ._item-img {
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
          }
        }
      }
    }

    .eventDetails-page-main {
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      margin-top: 10rpx;
      background-color: #fff;

      ._main-header {
        width: 100%;
        border-bottom: 1px solid #eeeeee;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 80rpx;
        padding-bottom: 30rpx;
        position: relative;

        .stitle {
          font-size: 24rpx;
          line-height: 24rpx;
          display: block;
          font-weight: normal;
          color: #999;
        }
        .dv {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .db {
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }
          .pageviews {
            padding-right: 30rpx;
            display: flex;
            align-items: center;
            image {
              width: 28rpx;
              height: 20rpx;
            }
            text {
              font-size: 20rpx;
              font-family: PingFang;
              font-weight: 500;
              color: #999999;
            }
            .t1 {
              padding: 0 6rpx 0 8rpx;
            }
          }
        }
        .share {
          width: 139rpx;
          white-space: nowrap;
          height: 49rpx;
          line-height: 49rpx;
          padding: 0 20rpx;
          font-size: 24rpx;
          text-align: right;
          background: #ff5f5f;
          background-image: linear-gradient(to right, #ff6850, #ff5f5f);
          font-weight: normal;
          color: #fff;
          border-radius: 40rpx 40rpx 40rpx 0;
        }
        ._img {
          height: 100%;
          .icon {
            width: 25rpx;
            height: 25rpx;
            margin-right: 10rpx;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }

      // 活动时间
      ._main-time {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding-bottom: 40rpx;

        ._main-box-info {
          width: 50%;
          display: block;
        }

        ._status {
          display: inline-block;
          margin-top: 5%;
          padding: 8rpx 30rpx;
          //background: #3f8fee;
          color: #fff;
          border-radius: 30rpx;
        }
      }

      ._main-box-info {
        position: relative;
        margin-top: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 26rpx;
        color: #8f8f94;
        padding-left: 16rpx;
        box-sizing: border-box;
        padding-left: 30rpx;

        ._main-box-info-label {
          color: #000;
          position: relative;
        }

        ._main-box-info-label::after {
          content: '';
          position: absolute;
          left: -20rpx;
          top: 15rpx;
          width: 8rpx;
          height: 8rpx;
          border-radius: 50%;
          overflow: hidden;
          background: #a4a4a4;
        }

        ._main-box-info-val {
          color: #888;
          margin-top: 10rpx;
        }
        .addrWrap {
          width: 560rpx;
        }

        ._position {
          position: absolute;
          top: 10rpx;
          right: 0;
          // background: #eef4ffff;
          // border-radius: 50%;
          text-align: center;
          .icon {
            width: 70rpx;
            height: 70rpx;
          }
          .distance {
            font-size: 20rpx;
            color: rgb(41, 121, 255);
          }
        }
      }

      .w50 {
        width: 50%;
        display: inline-block;
        position: relative;

        ._main-box-info-val {
          color: #ff8e50;
          font-size: 10rpx;

          ._val {
            font-size: 30rpx;
          }
        }

        ._main-box-info-pic {
          position: absolute;
          bottom: 0;
          left: 60%;

          ._img {
            width: 30rpx;
            height: 30rpx;
            border-radius: 50%;
            display: inline-block;
            margin-left: -10rpx;
          }
        }
      }

      .eventDetails-page-main-header {
        height: 80rpx;
        text-align: center;
        color: rgba(0, 198, 87, 1);
        font-weight: 600;
        line-height: 80rpx;
        border-bottom: 1px solid #eeeeee;

        ._header-text {
          border-bottom: 8rpx solid rgba(0, 198, 87, 1);
          padding-bottom: 10rpx;
        }
      }

      .eventDetails-page-main-box {
        width: 100%;

        .eventDetails-page-main-box-win {
          width: 100%;
          padding: 20rpx;
          box-sizing: border-box;

          .eventDetails-page-main-box-win-box {
            width: 100%;
            box-sizing: border-box;

            .eventDetails-page-main-box-detail {
              font-size: 26rpx;
              color: #8f8f94;
              line-height: 48rpx;

              /deep/ .box_p {
                margin-top: 20rpx;
                font-family: 微软雅黑 !important;
                font-size: 32rpx !important;
                line-height: 60rpx !important;
              }

              /deep/ .box_span {
                margin-top: 20rpx;
                font-family: 微软雅黑 !important;
                font-size: 32rpx !important;
                line-height: 60rpx !important;
              }

              /deep/ view {
                font-size: 32rpx;
                line-height: 60rpx;
              }

              /deep/ .box_img {
                width: 100%;
                margin: 10rpx 0;
              }

              ._rich-text {
                /deep/ img {
                  width: 100%;
                }
              }
            }
          }

          .wantAdd {
            width: 100%;
            height: 80rpx;
            border-radius: 10rpx;
            border: 1px solid #007aff;
            background-color: #007aff;
            font-size: 30rpx;
            text-align: center;
            line-height: 80rpx;
            color: #ffffff;
            margin-top: 30rpx;
          }

          .wantNo {
            width: 100%;
            height: 80rpx;
            border-radius: 10rpx;
            border: 1px solid #eeeeee;
            background-color: #fcfcfc;
            font-size: 30rpx;
            text-align: center;
            line-height: 80rpx;
            color: #cccccc;
            margin-top: 30rpx;
          }
        }
      }
    }
  }

  // 详情、须知 tab
  .tab-botton {
    position: relative;
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    background: #fff;

    ._main-tab-box {
      width: 100%;
      height: 80rpx;
      margin-bottom: 20rpx;
      background-color: #fff;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      border-bottom: 1px solid #eee;

      ._tab-btn {
        width: 50%;
        height: 100%;
        line-height: 80rpx;
        color: #777;
        text-align: center;
      }

      ._tab-btn-active {
        color: #ff3d5cff;

        ._btn-text {
          border-bottom: 4rpx solid #ff3d5cff;
          padding: 0 0 20rpx;
          box-sizing: border-box;
        }
      }
    }

    ._main-content {
      width: 100%;

      box-sizing: border-box;
      padding: 10rpx 40rpx;

      ._main-content-win {
        width: 100%;
        overflow-x: hidden;

        ._main-content-box {
          width: 200%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: flex-start;
          transition: all 0.2s linear;

          ._main-content-box-item {
            width: 100%;
            margin-bottom: 50rpx;

            ._main-item {
              // height: 86rpx;
              border: 1px solid rgba(200, 199, 204, 0.5);
              padding: 5rpx 20rpx;
              border-radius: 10rpx;
              margin-bottom: 40rpx;
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-between;
              align-items: center;
            }
          }
        }

        ._main-content-box-l {
          margin-left: 0;
        }

        ._main-content-box-r {
          margin-left: -100%;
        }
      }

      ._main-content-btn {
        font-size: 30rpx;
        border-radius: 40rpx;
        color: #fff;
        border: none;
      }
      .wantNo {
        color: #999;
        background-color: #ddd;
        background-image: linear-gradient(#eee, #ddd);
      }
    }
  }

  ._page-main-info {
    margin-top: 30rpx;

    ._page-main-info-chunk {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 26rpx;
      color: #888;

      ._chunk {
        ._chunk-ready {
          display: flex;
          align-items: center;

          ._img {
            width: 40rpx;
            height: 40rpx;
            margin-right: 20rpx;
          }
        }
      }

      ._chunk-text {
      }

      ._chunks {
        display: flex;
        flex: 1;
        justify-content: space-around;
        text-align: right;

        ._page-main-info-box {
          flex: 1;
          text-align: right;

          ._chunk-ready {
            flex: 1;
            justify-content: flex-end;
          }
        }
      }
    }

    ._page-main-info-chunks {
      padding-left: 8px;
    }

    ._page-main-info-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 26rpx;
      color: #888;

      ._info-box-item {
        width: 50%;
      }

      ._info-box-item-r {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
      }

      .news_img {
        display: flex;
        align-items: center;
        margin-left: 50rpx;

        ._img {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
      }

      .news_images {
        ._img {
          margin-right: 0;
        }
      }

      .dzimg {
        width: 100%;
        height: 100%;
      }
    }
  }
  .status1 {
    background: $status3f8fee;
    border: transparent;
  }
  .status2 {
    background: $statusffa800;
    border: 1px solid $statusffa800;
  }
  .status3 {
    // background: $color666;
    // 2U
    background: $statusecff700;
    border: transparent;
  }
  .status4 {
    background: $color666;
    border: transparent;
  }
  .status5 {
    background: $color666;
    border: transparent;
  }
</style>
